<template>
    <el-form ref="form" :model="form" label-width="80px" label-position="top">
        <el-form-item label="布局">
            <el-radio-group v-model="form.layout">
                <el-radio label="二小">
                    <div class="imageContainer image-size-100">
                        <img src="http://qiniu.liumingtai.com/157707038603396631.png"/>
                    </div>
                </el-radio>
                <el-radio label="三小">
                    <div class="imageContainer image-size-100">
                        <img src="http://qiniu.liumingtai.com/157707039203166432.png"/>
                    </div>
                </el-radio>
                <el-radio label="上大下二小">
                    <div class="imageContainer image-size-100">
                        <img src="http://qiniu.liumingtai.com/157707040803100535.png"/>
                    </div>
                </el-radio>
                <!--                <el-radio label="左大右二小">-->
                <!--                    <div class="imageContainer image-size-100">-->
                <!--                        <img src="http://qiniu.liumingtai.com/157707040303198734.png"/>-->
                <!--                    </div>-->
                <!--                </el-radio>-->
            </el-radio-group>
        </el-form-item>
        <el-form-item label="预览">
            <div label="二小" class="flex-start " v-if="form.layout==='二小'">
                <upload-image @change="(image)=>{this.changeImage(image,0)}"
                              :value="form.images&&form.images[0]"></upload-image>
                <upload-image @change="(image)=>{this.changeImage(image,1)}"
                              :value="form.images&&form.images[1]"></upload-image>
            </div>
            <div label="三小" class="flex-start " v-if="form.layout==='三小'">
                <upload-image @change="(image)=>{this.changeImage(image,0)}"
                              :value="form.images&&form.images[0]"></upload-image>
                <upload-image @change="(image)=>{this.changeImage(image,1)}"
                              :value="form.images&&form.images[1]"></upload-image>
                <upload-image @change="(image)=>{this.changeImage(image,2)}"
                              :value="form.images&&form.images[2]"></upload-image>
            </div>
            <div label="上大下二小" class="r1c2" v-if="form.layout==='上大下二小'">
                <upload-image @change="(image)=>{this.changeImage(image,0)}"
                              :value="form.images&&form.images[0]"></upload-image>
                <upload-image @change="(image)=>{this.changeImage(image,1)}"
                              :value="form.images&&form.images[1]"></upload-image>
                <upload-image @change="(image)=>{this.changeImage(image,2)}"
                              :value="form.images&&form.images[2]"></upload-image>
            </div>
            <!--            <div label="左大右二小" class="c1r2" v-if="form.layout==='左大右二小'">-->
            <!--                <upload-image @change="(image)=>{this.changeImage(image,0)}" :value="form.images[0]"></upload-image>-->
            <!--                <upload-image @change="(image)=>{this.changeImage(image,1)}" :value="form.images[0]"></upload-image>-->
            <!--                <upload-image @change="(image)=>{this.changeImage(image,2)}" :value="form.images[0]"></upload-image>-->
            <!--            </div>-->
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">确定</el-button>
        </el-form-item>
    </el-form>
</template>
<script>

    import {findParentComponent} from "../util/findComponent";
    import {createProp} from "../util/util";

    export default {
        props: {item: createProp([Object])},
        data() {
            return {
                form: {
                    layout: "二小",
                    images: [undefined, undefined, undefined, undefined],
                    table: [],
                    tableLoading: false,
                    total: 0,
                },

            }
        },
        mounted() {
            if (this.item && this.item.props) {
                this.form.images = this.item.props.images
                this.form.layout =this.item.props.layout
            }

        },
        components: {
            "upload-image": () => import('./image-upload')
        },
        methods: {
            zhLayoutAdapter(str) {
                if (str === 'c2') {
                    return '二小'
                }
                if (str === 'c3') {
                    return '三小'
                }
                if (str === 'c1r2') {
                    return '上大下二小'
                }
                return '二小'
            },
            changeImage(image, index) {
                if (!this.form.images) {
                    this.form.images = [undefined, undefined]
                }
                this.form.images[index] = image
            },
            onSubmit() {
                var parent = findParentComponent(this, 'editAllParent')
                var index = parent.resultList.findIndex(item => item.id === this.item.id)
                var images = this.form.images
                var layout = this.form.layout
                if (layout === "二小") {
                    images = images.splice(0, 2)
                } else {
                    images = images.splice(0, 3)
                }


                parent.resultList[index].props = {
                    images,
                    layout
                }
                parent.resultList[index].isShowEdit = false
                parent.resultList[index] = parent.resultList[index]
            }
        }
    }
</script>
<style lang="scss" scoped>
    .r1c2 {
        & > div {
            &:nth-child(3n+1) /deep/ {
                .imageContainer {
                    width: 200px;
                    height: 200px;
                }
            }

            &:nth-child(3n+2) {
                display: inline-block;
            }


            &:nth-child(3n) {
                display: inline-block;
            }
        }


    }
</style>
